---
---
<section class="relative pt-32 pb-20 md:pt-40 overflow-hidden hero-section">
  <!-- 动态光晕背景效果 -->
  <div class="glow-effect"></div>
  <div class="container-custom relative z-10">
    <div class="grid md:grid-cols-2 gap-12 items-center">
      <div class="slide-up" transition:animate="slide">
        <h1 class="mb-6 text-secondary-900 dark:text-white leading-tight">
          <span class="text-primary-600 dark:text-primary-400">简洁易用的</span><br> 权限工作流框架
        </h1>
        <p class="text-xl text-secondary-600 dark:text-secondary-300 mb-8 max-w-lg">
          致力于做.Net领域最简洁易用的权限工作流框架。
        </p>
        <div class="flex flex-wrap gap-4">
          <a href="/case-study" class="btn-primary">
            演示直达
          </a>
          <a href="https://gitee.com/dotnetchina/OpenAuth.Net" target="_blank" class="btn-outline flex items-center">
            <svg class="w-5 h-5 mr-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7540"><path d="M512 510.862222m-510.862222 0a510.862222 510.862222 0 1 0 1021.724444 0 510.862222 510.862222 0 1 0-1021.724444 0Z" fill="#C71D23" p-id="7541"></path><path d="M770.275556 453.973333H480.142222c-13.653333 0-25.031111 11.377778-25.031111 25.031111v62.577778c0 13.653333 11.377778 25.031111 25.031111 25.031111h176.355556c13.653333 0 25.031111 11.377778 25.031111 25.031111v13.653334c0 42.097778-34.133333 75.093333-75.093333 75.093333h-238.933334c-13.653333 0-25.031111-11.377778-25.031111-25.031111v-238.933333c0-42.097778 34.133333-75.093333 75.093333-75.093334h352.711112c13.653333 0 25.031111-11.377778 25.031111-25.031111v-62.577778c0-13.653333-11.377778-25.031111-25.031111-25.031111h-352.711112c-104.675556 0-188.871111 84.195556-188.871111 188.871111v352.711112c0 13.653333 11.377778 25.031111 25.031111 25.031111h372.053334c94.435556 0 170.666667-76.231111 170.666666-170.666667V479.004444c-1.137778-13.653333-12.515556-25.031111-26.168888-25.031111z" fill="#FFFFFF" p-id="7542"></path></svg>
            代码库
          </a>

          <a href="/contact" class="btn-outline flex items-center">
            联系我们
          </a>
        </div>
      </div>
      
      <div class="relative fade-in glow-container" transition:animate="fade">
        <!-- 工作流程图表动画 -->
        <div class="w-full max-w-lg mx-auto">
          <svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" class="w-full h-auto drop-shadow-xl">
            <!-- 背景元素与动画 -->
            <circle cx="400" cy="300" r="250" fill="#f0f9ff" class="dark:fill-slate-800 animate-pulse" style="animation-duration: 8s;" />
            <circle cx="550" cy="180" r="60" fill="#bae6fd" class="dark:fill-teal-800 animate-pulse" opacity="0.6" style="animation-duration: 5s;" />
            <circle cx="200" cy="400" r="80" fill="#e0f2fe" class="dark:fill-slate-700 animate-pulse" opacity="0.7" style="animation-duration: 6s;" />
            
            <!-- 装饰元素与动画 -->
            <circle cx="400" cy="300" r="220" stroke="#0ea5e9" stroke-width="5" fill="none" class="dark:stroke-teal-500" stroke-dasharray="15,10">
              <animateTransform 
                attributeName="transform" 
                type="rotate" 
                from="0 400 300" 
                to="360 400 300" 
                dur="30s" 
                repeatCount="indefinite" 
              />
            </circle>
            
            <!-- 工作流主体框架 -->
            <rect x="250" y="200" width="300" height="200" rx="20" ry="20" fill="#64748b" class="dark:fill-slate-600" opacity="0.9">
              <animate 
                attributeName="height" 
                values="200;205;200" 
                dur="4s" 
                repeatCount="indefinite" 
              />
            </rect>
            
            <!-- 工作流标题栏 -->
            <rect x="250" y="200" width="300" height="40" rx="20" ry="20" fill="#475569" class="dark:fill-slate-700" />
            
            <!-- 工作流节点1 -->
            <circle cx="300" cy="280" r="25" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="r" 
                values="25;27;25" 
                dur="3s" 
                repeatCount="indefinite" 
              />
            </circle>
            
            <!-- 工作流节点2 -->
            <circle cx="400" cy="280" r="25" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="r" 
                values="25;27;25" 
                dur="3s" 
                repeatCount="indefinite"
                begin="1s" 
              />
            </circle>
            
            <!-- 工作流节点3 -->
            <circle cx="500" cy="280" r="25" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="r" 
                values="25;27;25" 
                dur="3s" 
                repeatCount="indefinite" 
                begin="2s"
              />
            </circle>
            
            <!-- 连接线1 -->
            <path d="M325 280 L375 280" stroke="#0ea5e9" stroke-width="4" class="dark:stroke-teal-400">
              <animate 
                attributeName="stroke-dasharray" 
                values="0,40;40,0" 
                dur="2s" 
                repeatCount="indefinite" 
              />
            </path>
            
            <!-- 连接线2 -->
            <path d="M425 280 L475 280" stroke="#0ea5e9" stroke-width="4" class="dark:stroke-teal-400">
              <animate 
                attributeName="stroke-dasharray" 
                values="0,40;40,0" 
                dur="2s" 
                repeatCount="indefinite"
                begin="1s" 
              />
            </path>
            
            <!-- 用户图标 -->
            <circle cx="300" cy="280" r="15" fill="#94a3b8" class="dark:fill-white" />
            <circle cx="300" cy="270" r="6" fill="#94a3b8" class="dark:fill-white" />
            <path d="M285 290 Q300 305 315 290" fill="#94a3b8" class="dark:fill-white" />
            
            <!-- 审批图标 -->
            <rect x="390" y="270" width="20" height="20" fill="#94a3b8" class="dark:fill-white" />
            <path d="M395 280 L405 290 L415 270" stroke="#475569" stroke-width="3" fill="none" class="dark:stroke-slate-700" />
            
            <!-- 完成图标 -->
            <circle cx="500" cy="280" r="15" fill="#94a3b8" class="dark:fill-white" />
            <path d="M490 280 L500 290 L515 270" stroke="#475569" stroke-width="3" fill="none" class="dark:stroke-slate-700" />
            
            <!-- 数据流动画 -->
            <circle cx="300" cy="350" r="8" fill="#0ea5e9" class="dark:fill-teal-400" opacity="0.7">
              <animate 
                attributeName="cx" 
                values="300;500;300" 
                dur="6s" 
                repeatCount="indefinite" 
              />
              <animate 
                attributeName="opacity" 
                values="0.7;0.3;0.7" 
                dur="6s" 
                repeatCount="indefinite" 
              />
            </circle>
            
            <circle cx="350" cy="350" r="6" fill="#0ea5e9" class="dark:fill-teal-400" opacity="0.5">
              <animate 
                attributeName="cx" 
                values="350;550;350" 
                dur="8s" 
                repeatCount="indefinite" 
              />
              <animate 
                attributeName="opacity" 
                values="0.5;0.2;0.5" 
                dur="8s" 
                repeatCount="indefinite" 
              />
            </circle>
            
            <!-- 悬浮控制面板 -->
            <rect x="300" y="400" width="200" height="40" rx="10" ry="10" fill="#475569" class="dark:fill-slate-700">
              <animate 
                attributeName="y" 
                values="400;405;400" 
                dur="5s" 
                repeatCount="indefinite" 
              />
            </rect>
            
            <!-- 控制按钮 -->
            <circle cx="330" cy="420" r="10" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="fill-opacity" 
                values="1;0.7;1" 
                dur="3s" 
                repeatCount="indefinite" 
              />
            </circle>
            <circle cx="370" cy="420" r="10" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="fill-opacity" 
                values="1;0.7;1" 
                dur="3s" 
                repeatCount="indefinite"
                begin="1s" 
              />
            </circle>
            <circle cx="410" cy="420" r="10" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="fill-opacity" 
                values="1;0.7;1" 
                dur="3s" 
                repeatCount="indefinite"
                begin="2s" 
              />
            </circle>
            <circle cx="450" cy="420" r="10" fill="#0ea5e9" class="dark:fill-teal-500">
              <animate 
                attributeName="fill-opacity" 
                values="1;0.7;1" 
                dur="3s" 
                repeatCount="indefinite"
                begin="1.5s" 
              />
            </circle>
            
            <!-- 动画文字 -->
            <text x="550" y="150" font-family="Arial" font-size="24" fill="#0ea5e9" class="dark:fill-teal-400" font-weight="bold">
              OpenAuth.Net
              <animate 
                attributeName="opacity" 
                values="0.7;1;0.7" 
                dur="3s" 
                repeatCount="indefinite" 
              />
            </text>
            
            <!-- 浮动粒子 -->
            <circle cx="300" cy="200" r="5" fill="#0ea5e9" class="dark:fill-teal-400" opacity="0.7">
              <animate 
                attributeName="cy" 
                values="200;180;200" 
                dur="4s" 
                repeatCount="indefinite" 
              />
              <animate 
                attributeName="opacity" 
                values="0.7;0.3;0.7" 
                dur="4s" 
                repeatCount="indefinite" 
              />
            </circle>
            <circle cx="500" cy="250" r="4" fill="#0ea5e9" class="dark:fill-teal-400" opacity="0.5">
              <animate 
                attributeName="cy" 
                values="250;230;250" 
                dur="5s" 
                repeatCount="indefinite" 
              />
              <animate 
                attributeName="opacity" 
                values="0.5;0.2;0.5" 
                dur="5s" 
                repeatCount="indefinite" 
              />
            </circle>
            <circle cx="450" cy="400" r="6" fill="#0ea5e9" class="dark:fill-teal-400" opacity="0.6">
              <animate 
                attributeName="cy" 
                values="400;380;400" 
                dur="6s" 
                repeatCount="indefinite" 
              />
              <animate 
                attributeName="opacity" 
                values="0.6;0.3;0.6" 
                dur="6s" 
                repeatCount="indefinite" 
              />
            </circle>
          </svg>
        </div>
      </div>
    </div>
  </div>
  

</section>

<style>
  /* 如需添加额外动画的关键帧 */
  @keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
  }
  
  /* 为整个SVG容器应用浮动动画 */
  .fade-in svg {
    animation: float 6s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(14, 165, 233, 0.3));
  }
  
  :global(.dark) .fade-in svg {
    filter: drop-shadow(0 0 15px rgba(20, 184, 166, 0.3));
  }

  /* 添加渐变背景效果 */
  .hero-section {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(14, 165, 233, 0.05) 100%);
    position: relative;
    overflow: hidden;
  }

  :global(.dark) .hero-section {
    background-image: linear-gradient(180deg, rgba(15, 23, 42, 0.3) 0%, rgba(20, 184, 166, 0.1) 100%);
  }

  /* 工作流程图表区域的径向渐变 */
  .fade-in {
    background: radial-gradient(circle at center, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
    position: relative;
  }

  :global(.dark) .fade-in {
    background: radial-gradient(circle at center, rgba(20, 184, 166, 0.05) 0%, transparent 70%);
  }
  
  /* 动态光晕效果 */
  @keyframes pulse-glow {
    0% { opacity: 0.5; transform: scale(0.95); }
    50% { opacity: 0.8; transform: scale(1.05); }
    100% { opacity: 0.5; transform: scale(0.95); }
  }
  
  @keyframes rotate-glow {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
  
  /* 主背景光晕效果 */
  .glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  
  .glow-effect::before, .glow-effect::after {
    content: '';
    position: absolute;
    width: 80vw;
    height: 80vw;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    animation: pulse-glow 8s ease-in-out infinite;
  }
  
  .glow-effect::after {
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
    animation: pulse-glow 8s ease-in-out infinite reverse, rotate-glow 30s linear infinite;
  }
  
  :global(.dark) .glow-effect::before {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.15) 0%, transparent 70%);
  }
  
  :global(.dark) .glow-effect::after {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.1) 0%, transparent 70%);
  }
  
  /* 工作流图表容器光晕效果 */
  .glow-container {
    position: relative;
  }
  
  .glow-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(30px);
    z-index: -1;
    animation: pulse-glow 6s ease-in-out infinite;
  }
  
  :global(.dark) .glow-container::before {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.2) 0%, transparent 70%);
  }
</style>
